import styled from '@emotion/styled';
import { Form, Radio } from 'antd';
import React from 'react';

interface TransferHeaderProps {
	defaultChecked?: string;
	options: { label: string; value: string; disable?: boolean }[];
	onChange: (values: any) => void;
}

const RadioContainer = styled.div`
	.ant-form-item {
		margin: 20px 0 10px 0;
	}
	.ant-radio-button-wrapper {
		background: #fff;
	}
	.ant-radio-button-wrapper-checked {
		background: #252b48;
		span {
			color: #fff;
		}
	}
`;

const TransferHeader = (props: TransferHeaderProps) => {
	const { options = [], onChange, defaultChecked = '' } = props;
	return (
		<RadioContainer>
			<Form.Item>
				<Radio.Group options={options} onChange={e => onChange(e.target.value)} value={defaultChecked} optionType="button" buttonStyle={'outline'} />
			</Form.Item>
		</RadioContainer>
	);
};

export default TransferHeader;
